﻿<style>
    .page{
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        max-height: 100vh;
        background-color: #EFEFF4;
    }
    .page_title {
        text-align: center;
        font-size: 22px;
        font-weight: 400;
        margin: 0 15%;
        margin-top: 15px;
    }

    .page_desc {
        text-align: center;
        color: #888;
        font-size: 14px;
    }

    .page_price {
        text-align: center;
        font-size: 30px;
        font-weight: 400;
        margin: 0 15%;
    }


    .weui-btn_primary2 {
        border-radius: 0px;
        background-color: #04be02;
        width: 100%;
    }

    .home {
        line-height: 1.0;
    }

    .page.home .page__bd li:first-child {
        margin-top: 0;
    }

    .home ul {
        padding-left: 10px;
        padding-right: 10px;
    }

    .home.page__bd li {
        margin: 15px 0;
        overflow: hidden;
        border-radius: 2px;
        cursor: pointer;
    }

    .home .weui-media-box__title {
        font-size: 18px;
    }

    .home .weui-flex {
        padding: 30px 15px;
        padding-top: 20px;
    }

    .weui-flex .weui-flex__item {
    }

    .home.page__bd .first li .weui-flex:last-child {
        background: linear-gradient(left, #FA5858,#F8A590);
        background: -webkit-linear-gradient(left, #FA5858,#F8A590);
        padding: 8px;
    }

    .home.page__bd .second li .weui-flex:last-child {
        background: linear-gradient(left, #57A8FA,#90DBF8);
        background: -webkit-linear-gradient(left, #57A8FA,#90DBF8);
        padding: 8px;
    }

    .home.page__bd .unUse li .weui-flex:last-child {
        background: #B0B4BA;
        padding: 8px;
    }

    .first small,
    .second small,
    .unUse small {
        font-size: 8px;
    }


    .home .first li {
        border-radius: 10px;
        background: linear-gradient(left, #ff5f5f,#fcb39c);
        background: -webkit-linear-gradient(left, #ff5f5f,#fcb39c);
        color: #fff;
        font-weight: 100;
    }


    .home .second li {
        border-radius: 10px;
        background: linear-gradient(left, #5eafff,#9de7fc);
        background: -webkit-linear-gradient(left,#5eafff,#9de7fc);
        color: #fff;
        font-weight: 100;
    }

    .home .unUse li {
        border-radius: 10px;
        background: #b7bcc2;
        color: #fff;
        font-weight: 100;
    }

    .hasChoose {
        text-align: right;
        position: relative;
        top: 0px;
        right: 0;
    }

    .hasChoose img {
        width: 18px;
        padding-top: 5px;
        padding-right: 5px;
        z-index: 1100;
        position: absolute;
        top: 0px;
        right: 0px;
    }

    .hasChoose .bg {
        width: 60px;
        height: 60px;
        background-color: #ff5555;
        position: absolute;
        top: -35px;
        right: -30px;
        z-index: 1100;
        transform: rotate(40deg);
    }
    .bg-label {
        padding:2px 8px;
        border-radius:5px;
        font-size:12px;
        background:linear-gradient(to right, rgba(254,121,84,0.8), rgba(254,121,84,1));
        color:#fff;
        display:inline;
    }
    .weui-btn_orangeBottom{
        background: linear-gradient(to right, rgba(254,121,84,0.8), rgba(254,121,84,1));
    }
    .weui-cells_radio .weui-check:checked + .weui-icon-checked:before{
        color: #FE7954;
    }
</style>
<div class="page  js_show" ng-controller="PayBillCtrl">
    <div class="main" style="flex: 1;overflow-y: auto;" ng-show="!billData.showCouponList">
        <h1 class="page_title" ng-bind="billData.billDetail.ShopName"></h1>
        <p class="page_desc">
            <span ng-bind="billData.billDetail.BillDateTime"></span>
        </p>
        <p class="page_desc">
            <span data-bind="text: msg"></span>
        </p>
        <div class="weui-cells__title">
            单号: <span ng-bind=" billData.billDetail.BillNo"></span>,
            共 <span ng-bind=" billData.billDetail.BillItems.length"></span>份
        </div>
        <div class="weui-cells">
            <div class="weui-cell" ng-repeat="item in billData.billItems">
                <div class="weui-cell__bd">
                    <p>
                        <span ng-bind="item.ItemName"></span>/
                        <span ng-bind="item.ItemStandard"></span>
                        <small class="bg-label" ng-show="item.ItemDcPriceType == 'MemberPrice'">会员价</small>
                        <small class="bg-label" ng-show="item.ItemDcPriceType == 'PostPrice'">线下优惠</small>
                    </p>
                </div>
                <div class="weui-cell__ft">
                    ￥<span ng-bind="item.ItemPrice"></span> x <span ng-bind="item.ItemCount"></span>
                </div>
            </div>
        </div>
            <div class="weui-cell bg-primary" style="padding: 8px 15px; font-size: 13px;">
                <div class="weui-cell__bd"></div>
                <div class="weui-cell__ft">小计:</div>
                <div class="weui-cell__ft">&emsp;&emsp;&emsp;<span ng-bind="'￥'+ billData.payResult.SourceTotal"></span></div>
            </div>

            <div class="weui-cell bg-primary" style="padding: 8px 15px; font-size: 13px;" ng-repeat="item in billData.payResult.DeductionItems">
                <div class="weui-cell__bd"></div>
                <div class="weui-cell__ft"><span >{{item.TypeDisplay}}</span></div>
                <div class="weui-cell__ft">&emsp;&emsp;&emsp;<span>{{'￥'+item.Value}}</span></div>
            </div>
            <div class="weui-cell bg-primary" style="padding: 8px 15px; font-size: 13px;">
                <div class="weui-cell__bd"></div>
                <div class="weui-cell__ft">实付:</div>
                <div class="weui-cell__ft">&emsp;&emsp;&emsp;<span>{{billData.payResult.FinalPayment}}</span></div>
            </div>
        <div class="weui-cells__title">预定</div>
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label">预定时间</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="datetime-local" ng-value="billData.billDetail.CustomerMealTime" ng-model="billData.billDetail.CustomerMealTime">
                </div>
            </div>
          <!--  <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label">输入人数</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="台号" ng-model="billData.billDetail.tableno">
                </div>
            </div>-->
        </div>
   <div class="weui-cells__title">选择会员身份</div>
    <div class="weui-cells">
        <div class="weui-cell weui-cell_select">
            <div class="weui-cell__bd">
                <select class="weui-select" ng-model="billData.card.currCard"  ng-change="billData.card.changeCard_change()" ng-options="item.CardName + '-' + item.CardCode for item in billData.card.list">
                </select>
            </div>
        </div>
    </div>
   <div class="weui-cells__title">支付方式</div>
    <div class="weui-cells weui-cells_radio" >
        <label class="weui-cell weui-check__label" ng-repeat="item in billData.payType.list">
            <div class="weui-cell__bd">
                <p ng-bind="item.name"></p>
                <p class="weui-cells__tips" style="padding-left: 0px;"><span ng-show="item.rest != undefined">{{'会员卡余额:￥'+ item.rest}}</span><span ng-show="item.points != undefined">&nbsp;积分余额:</span><span >{{item.points}}</span></p>
            </div>
            <div class="weui-cell__ft">
                <input type="radio" class="weui-check" value="{{item.type}}" ng-model="billData.payType.currPayType" ng-change="billData.payType.changePayType_change()"/>
                <span class="weui-icon-checked"></span>
            </div>
        </label>
    </div>
     <div class="weui-cells__title">备注</div>
        <div class="weui-cells weui-cells_form bg-default m-t-none m-b-sm">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                        <textarea class="weui-textarea" placeholder="可备注用餐人数 口味等要求" rows="3" ng-model="billData.billDetail.CustomerRemark"></textarea>
                </div>
            </div>
        </div>
    <!--<div class="weui-cells" style="margin-top: 0px" ng-show="billData.showChooseCoupon">
        <label class="weui-cell weui-cell_access">
            <div class="weui-cell__bd">
                <p ng-click="billData.chooseCoupon_click()"  ng-show="billData.currCoupon == undefined">点击选择优惠券</p>
                <p ng-show="billData.currCoupon != undefined" style="padding-left: 0px;"  ng-click="billData.chooseCoupon_click()"><span ng-bind="billData.currCoupon.Name"></span></p>
            </div>
            <div class="weui-cell__ft">
            </div>
        </label>
    </div>-->
       <!-- <div class="weui-cells weui-cells_form">
            <div class="weui-cell weui-cell_switch">
                <div class="weui-cell__bd">是否开具发票</div>
                <div class="weui-cell__ft">
                    <label for="switchCP" class="weui-switch-cp">
                        <input id="switchCP" class="weui-switch-cp__input" type="checkbox"  ng-model="billData.invoice.enabled" ng-change="billData.invoice.enabled_change()">
                        <div class="weui-switch-cp__box"></div>
                    </label>
                </div>
            </div>
            <div class="weui-cells weui-cells_radio" style="margin-top: 0" ng-show="billData.invoice.enabled">
                <div class="weui-flex">
                    <div class="weui-flex__item">
                        <div class="placeholder">
                            <label class="weui-cell weui-check__label">
                                <div class="weui-cell__bd">
                                    <p>个人发票</p>
                                </div>
                                <div class="weui-cell__ft">
                                    <input type="radio" class="weui-check" name="invoice" value="true" ng-model="billData.invoice.isPersonal" ng-change="billData.invoice.isPersonal_change()">
                                    <span class="weui-icon-checked"></span>
                                </div>
                            </label>
                        </div>
                    </div>
                    <div class="weui-flex__item">
                        <div class="placeholder">
                            <label class="weui-cell weui-check__label">
                                <div class="weui-cell__bd">
                                    <p>公司发票</p>
                                </div>
                                <div class="weui-cell__ft">
                                    <input type="radio" class="weui-check" name="invoice" value="false" ng-model="billData.invoice.isPersonal" ng-change="billData.invoice.isPersonal_change()">
                                    <span class="weui-icon-checked"></span>
                                </div>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="weui-cell" ng-show="billData.invoice.isPersonal == 'false' && billData.invoice.enabled">
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" placeholder="请输入公司发票抬头" ng-bind="billData.invoice.title">
                </div>
            </div>
        </div>-->
    </div>
    <div ng-show="!billData.showCouponList" class="wrapper">
        <a  class="weui-btn weui-btn_orangeBottom m-t-none no-radius" ng-click="billData.btnPay_click()"  ng-show="billData.payResult != undefined">支付 ￥ <span ng-bind="billData.payResult.FinalPayment"></span>元</a>
        <a  class="weui-btn weui-btn_default m-t-none no-radius m-t-sm" ng-click="billData.returnEdit_click()">返回修改</a>
    </div>
    <!--<div class="page__bd page__bd_spacing home m-b-sm" ng-show="billData.showCouponList">
        <div class="weui-cells weui-cells_checkbox" style="margin: 10px 12px 0 12px">
            <div class="hasChoose" ng-show="billData.currCoupon == undefined">
                <div class="bg"></div>
                <img src="img/wx/pay_bill/choose.png" />
            </div>
            <label class="weui-cell weui-check__label" for="s11" ng-click="billData.returnPayBill_click()">
                <div class="weui-cell__bd">
                    <p>不使用优惠券</p>
                </div>
            </label>
        </div>
        <div class="weui-cells__title">优惠券列表</div>

        <ul class="first">
            <li class="" ng-repeat="item in billData.couponsOfFilter[0].list|filter:{'Category':'Cash'}"  ng-click="billData.chooseCurrCoupon_click(item)">
                <div class="hasChoose" ng-show="billData.currCoupon == item">
                    <div class="bg"></div>
                    <img src="img/wx/pay_bill/choose.png" />
                </div>
                <div class="weui-flex ">
                    <div class="weui-flex__item">
                        <p class="weui-media-box__title" ng-bind="item.Name"> ￥10</p>
                        <p style="font-size: 12px; margin-top: 8px"><span ng-bind="item.EndTime + '过期'"></span></p>
                    </div>
                    <div class="weui-flex__item" style="text-align: right; margin-top: -10px">
                        <img src="img/wx/coupon/cash.png" style="width: 30%" />
                    </div>
                </div>
                <div class="weui-flex">
                    <small>{{'满'+ item.CategorySetting.FullValue +'元可减'+item.CategorySetting.CutValue+'元'}}</small>
                </div>
            </li>
        </ul>
        <ul class="second" >
            <li ng-repeat="item in billData.couponsOfFilter[0].list|filter:{'Category':'Object'}"  >
                <div class="hasChoose"  ng-show="billData.currCoupon == item" >
                    <div class="bg"></div>
                    <img src="img/wx/pay_bill/choose.png" />
                </div>
                <div class="weui-flex" style="" ng-click="billData.chooseCurrCoupon_click(item)">
                    <div class="weui-flex__item">
                        <h4 class="weui-media-box__title" ng-bind="item.Name">10元霸王餐</h4>
                        <p style="font-size: 12px; margin-top: 8px"><span ng-bind="item.EndTime + '过期'"></span></p>
                    </div>
                    <div class="weui-flex__item" style="text-align: right; margin-top: -10px">
                        <img src="img/wx/coupon/gift.png" style="width: 30%" />
                    </div>
                </div>
                <div class="weui-flex">
                    <small data-bind="item.Description"></small>
                </div>
            </li>
        </ul>
        <div class="weui-cells__title ">不可用优惠券列表</div>
        <ul class="unUse"  ng-repeat="item in billData.couponsOfFilter[1].list">
            <li >
                <div class="weui-flex">
                    <div class="weui-flex__item">
                        <p class="weui-media-box__title" ng-bind="item.Name"> ￥10</p>
                        <p style="font-size: 12px; margin-top: 8px"><span ng-bind="item.EndTime + '过期'"></span></p>
                    </div>
                    <div class="weui-flex__item" style="text-align: right; margin-top: -10px">
                        <img src="img/wx/coupon/cash.png" style="width: 30%" />
                    </div>
                </div>
                <div class="weui-flex">
                    <small data-bind="item.Description"></small>
                </div>
            </li>
        </ul>
    </div>-->
</div>